<template>
	<view class="cc-radio" :style="{
		width: containerWidth,
		'--primary': $theme.primary,
		'--content-color': $theme.contentColor,
		'--light-color': $theme.lightColor,
		'--primary-disabled': $theme.primaryDisabled
	}">
		<view 
			:class="[
				'cc-radio__item', 
				item.checkboxActive ? 'cc-radio__active' : '',
				disabled ? 'cc-radio__disabled' : ''
			]" 
			v-for="(item, index) in rangeList" 
			:key="index"
			@click="handleClick(item)"
		>
			<view class="cc-radio__circle">
				<text :class="item.checkboxActive ? 'cc-radio__icon icon-duihao' : 'cc-radio__no__select'"></text>
			</view>
			<view>{{ item[showKey] }}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 单选框
	 */
	import Emitter from '../../libs/util/emitter.js';
	export default {
		name: 'w-checkbox',
		mixins: [Emitter],
		props: {
			value: {
				type: String,
				default: ''
			},
			// 列表
			list: {
				type: Array,
				default: () => []
			},
			showKey: {
				type: String,
				default: 'label'
			},
			valueKey: {
				type: String,
				default: 'value'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否互相排斥，为true时已选内容不可被再次点击取消
			exclusion: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				containerWidth: 'calc(100% + 30rpx)',
				rangeList: []
			}
		},
		methods: {
			handleClick(item) {
				if (this.disabled) return;
				if (!item.checkboxActive) {
					let value = item[this.valueKey];
					this.$emit('input', value);
					this.$nextTick(() => {
						this.dispatch('w-form-item', 'on-form-change', value);
					});
				} else if (!this.exclusion) {
					this.$emit('input', '');
					this.$nextTick(() => {
						this.dispatch('w-form-item', 'on-form-change', '');
					});
				}
			}
		},
		mounted() {
			// 给容器加长30rpx的宽度，抵消每行最后一个元素margin-right带来的占位
			// #ifdef APP-VUE
			const query = uni.createSelectorQuery().in(this);
			query.select('.cc-radio').boundingClientRect(data => {
				this.containerWidth = uni.upx2px(30) + data.width + 'px';
			}).exec();
			// #endif
		},
		watch: {
			// 生成新的数组用于组件渲染，加入标识active
			list: {
				handler(newValue) {
					this.rangeList = newValue.map(item => ({
						...item,
						checkboxActive: false
					}));
				},
				immediate: true
			},
			// 根据value修改active
			value: {
				handler(newValue) {
					this.rangeList.forEach((item, index) => {
						item.checkboxActive = (newValue == item[this.valueKey]);
					})
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKwAAsAAAAABmgAAAJmAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp0fQE2AiQDCAsGAAQgBYRtBzAbowXInpo8EbTcm0HAZqXSwABABNXavz17+wnRsgYUKhVFwj4XIHAxKsqQYyPe5VpuGdSrHf8sX5VIIRxscjn43OT2yRVd69ioKtM6AuEqdHOCZwgccvMDHQKiiAPBFDimPr1AckB366So5EjA04EPFNV0sp/xw9gFL/A0gVqD0pr2Z5ZWoVNmTwrEFSUt6Cx4ZJnFq4XKhpVZPNSmOt1Kj3gQ/T7+W41OkoqCXXR0edqFsV9nTlLLUblkNyDwgoDWV6DAPJCJs8bIgRbBmC1qI61GwbHyg19n/+XALI5qEOyvs3PrQT8UPpPIEz9qbgI5iQ0DS5iab0317X29WH0+WXu53Hg7XXVHr253Xtwcd3Xd3uk4l37Rl9Lm53+7funSnr17KcE9fubWreZbPa9u3kDTb7nz5fWY+T61ltrHCsHEca56MNCr2arjW8fHQjSmXMpQlIDqXVqDXyMa2JANiW1KWRM12pLhSRMTatWiDDta/U7VdtxHIlTruBtblYEMhWrjxEydR4U666hUbQu15syur9PGaBG5BrPOAUKzBySNvqLQ7ImYqT+o0OkPlZqjBbUuwo51JkN1b8hictFuoHJ0WbgW7o7zl0lWQsvkJRFrnUyi/FjI5svxWSqTWWJOUpVFZoHC6AhnwHkUhhpjo31yOOsxx6VcTjR9KOvoCLrtMYiFEReyNSDFoZWJoD3rrnx/GZEqQhbTUVLnX0eMhOoeFWTlBxBnleVBJY/yTqJKKmJMQIKhRdAMGEZCIQ3FzcN8xMGyvAmhWEnOaSWGKrPbq6MfKGAV2LoUzqBC5aWK8iwNAA==');
	}
	.cc-radio {
		display: flex;
		flex-wrap: wrap;
		width: calc(100% + 30rpx);
		margin-bottom: -20rpx;
		box-sizing: content-box;
		margin-top: 10rpx;
		&__item {
			line-height: 60rpx;
			height: 60rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			display: inline-flex;
			align-items: center;
			.cc-radio__circle {
				margin-right: 20rpx;
			}
		}
		&__disabled {
			color: var(--light-color);
			pointer-events: none;
			&::after {
				border-color: var(--light-color);
			}

			.cc-radio__icon {
				color: var(--primary-disabled);
			}
		}
		&__active {
			&::after {
				border-color: var(--primary);
				border-width: 2px;
			}
		}
		&__icon {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			color: var(--primary);
		}
		&__no__select {
			display: block;
			width: 32rpx;
			height: 32rpx;
			border-radius: 32rpx;
			border: 1px solid var(--primary);
			box-sizing: border-box;
		}

		.icon-duihao:before {
			content: "\e684";
		}
	}
</style>
